<template>
  <div class="data-statistics">
    <div class="item" v-for="item in list" :key="item.id">
      <div class="title">{{ props.type }}{{ item.title }}</div>
      <div class="num">{{ item.num }}</div>
    </div>
  </div>
</template>

<script setup>
import { reactive, defineProps, watch } from 'vue'
import { dataSList } from '@/utils/enum'

const props = defineProps({
  type: String,
  total: Number,
  average: Number,
  counts: Number
})
const list = reactive(dataSList)
watch(
  () => props.total,
  () => {
    list[0].num = props.counts
    list[1].num = props.average
    list[2].num = props.total
  }
)
</script>

<style lang="less" scoped>
@import url(../style/data-statistics.less);
</style>
